import parent from '../relation/parent'
import { injectStore } from 'ee-vuex'
export default injectStore({
  mixins: [parent],
  provide() {
    return {
      updateValue: (value, checked) => {
        if (checked) {
          if (!this.modelValue.includes(value))
            this.modelValue.push(value);
        }
        else
          this.modelValue.remove(value);
      }
    }
  },
  emits: {
    /** 选中项发生变化时触发
     * @param i - 组件当前实例
     */
    change: (i) => true,
  },
  props: {
    /** 绑定所有选中子组件的value，若子组件缺少value则是undefined */
    modelValue: {
      default: () => [],
      set(value) {
        if (!value)
          return value;
      },
    },
    /** 至少要选中的项数，选项过少则选中的不能取消 */
    min: [Number, String],
    /** 最多可选中的项数，选项过多则没选中的不能再选 */
    max: [Number, String],
  },
  methods: {
    /** 全选
     * @param {boolean} value - true: 全选 / false: 全不选
     */
    checkAll(value) {
      for (const child of this.children)
        child.checked = value;
    },
    /** 没有全选则全选 / 已经全选则取消全选 */
    toggleAll() {
      this.checkAll(!this.children.every(i => i.checked));
    },
    /** 反选 */
    reverseAll() {
      for (const child of this.children)
        child.checked = !child.checked;
    },
  },
  watch: {
    /** 外部可能对数组进行增减操作 */
    "modelValue.length"(value) {
      const model = this.modelValue;
      // 根据数组里的值，设置子元素的checked属性
      for (const child of this.children)
        child.checked = model.indexOf(child.value) != -1;
      // 外部赋值导致checked发生变化
      if (value != model.length)
        return;
      this.$emit("change", model, this);

      if (this.max > 0) {
        if (model.length >= this.max) {
          // 没选中的不能再选了
          for (const child of this.children)
            if (!child.checked)
              child.$el.setAttribute("disabled", true);
        } else {
          // 没选中的又可以再选了
          for (const child of this.children)
            if (!child.checked)
              child.$el.removeAttribute("disabled");
        }
      }
      if (this.min > 0) {
        if (model.length > this.min || this.max == this.min) {
          // 选中的可以取消了
          for (const child of this.children)
            if (child.checked)
              child.$el.removeAttribute("disabled");
        } else {
          // 选中的不能再取消了
          for (const child of this.children)
            if (child.checked)
              child.$el.setAttribute("disabled", true);
        }
      }
    }
  }
})